import React from 'react';
import * as echarts from 'echarts';

class EchartEventCls extends React.Component {
  myChart = {}
  chartRef = React.createRef();
  componentDidMount() {
    this.myChart = echarts.init(document.getElementById('EchartEventCls'));    
    let _this = this;
    setInterval(function () {
      _this.myChart.resize();     
    }, 2000)
  }
  componentDidUpdate() {
    const { data } = this.props;
    var dataCls = []
    var dataVal = []
    data.forEach(element => {
      if (dataCls.indexOf(element.eventType) < 0)
        dataCls.push(element.eventType)
    });
    dataCls.forEach(element => {
      var items = data.filter(o => o.eventType === element)
      dataVal.push(items.length)
    });
    // 绘制图表
    this.myChart.setOption({
      title: {
        text: '案件类型统计',
        left: 'center',
        top: '15'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: dataCls,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '统计数量',
          type: 'bar',
          barWidth: '60%',
          data: dataVal
        }
      ]
    });
  }
  render() {
    return (
      <div ref={this.chartRef} id='EchartEventCls' style={{ height: this.props.height }}></div>
    )
  };
}
export default EchartEventCls;